//配置路由相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'
// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'

// 路由懒加载方式
const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
const About = () => import('../components/About')
const User = () => import('../components/User')
const Profile = () => import('../components/Profile')

// 1.通过Vue.use安装插件
Vue.use(VueRouter)

const routes = [
    {
        path: '',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home,
        meta: {
            title: '首页'
        },
        children: [
            // {
            //     path: '',
            //     redirect: 'news'
            // },
            {
                path: 'news',
                component: HomeNews
            },
            {
                path: 'message',
                component: HomeMessage
            }
        ]
    },
    {
        path: '/about',
        meta: {
            title: '关于'
        },
        component: About,
        // 路由独享的首位
        beforeEnter: (to, from, next) => {
            console.log('about beforeEnter');
            next()
        }
    },
    {
        path: '/user/:userid',
        meta: {
            title: '用户'
        },
        component: User
    },
    {
        path: '/profile',
        meta: {
            title: '档案'
        },
        component: Profile
    }
]

// 2.创建VueRouter对象
const router = new VueRouter({
    // 配置路由和组件之间的应用关系
    routes,
    mode: 'history'
})

//全局导航守卫，前置守卫(guard)就是前置回调，在路由跳转之前就把title更改了
router.beforeEach((to, from, next) => {
    document.title = to.matched[0].meta.title
    next()
})

// 全局导航守卫，后置钩子(hook)就是后置回调
router.afterEach( route => {
    console.log(route);
})

// 3.将router对象传入到vue实例
export default router